<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script src="js/jquery.form.min.js"></script>
    <style>
        #login {
            margin: 40px auto;
            background-image: url("imgs/loginbk.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 60%;
            height: 500px;

            input {
                margin-left: 71%;
            }

            #un {
                margin-top: 18.7vh;
            }

            #pw {
                margin-top: 2.1vh;
            }

            #sb {
                height: 4vh;
                margin-top: 5.3vh;
                margin-left: 71.9%;
                width: 16%;
                background-color: #ff7a21;
                color: white;
            }

            a {
                font-size: 13px;
                font-weight: bolder;
                margin-left: 76%;
                background-color: #f2f7f9;
                color: #ff7a21;
            }
        }
    </style>
</head>

<body>
    <div id="new_header">
        <script>
            $("#new_header").load("header.html");
        </script>
    </div>

    <!-- 正文部分 -->
    <div id="main">
        <!-- 登录部分 -->
        <div id="login">
            <form id="form-log" action="UserServlet">
                <input type="text" name="methodName" value="login" hidden>
                <input id="un" type="text" placeholder="请输入用户名" name="userName"><br>
                <input id="pw" type="password" placeholder="请输入密码" name="password"><br>
                <input id="sb" type="submit" value="登录"> <br><br><br>
            </form>
            <a href="register.html">免费注册</a>
        </div>
    </div>
    <script>
        // $(function ())是文档document加载完自动调用的函数
        $(function () {
            /*
             获取form元素，调用其ajaxForm(...)方法
             内部的function(data)的data就是后台返回的数据
            */
            $("#form-log").ajaxForm(function (data) {
                console.log(data);
                alert(data);
            }
            );
        });
    </script>
</body>

</html>